<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生主页</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; background: #f4f4f4; }
        .container { max-width: 1200px; margin: 2rem auto; padding: 0 1rem; }
        .header { background: #667eea; color: white; padding: 1rem; text-align: center; border-radius: 5px 5px 0 0; }
        .tabs { display: flex; background: #fff; border-bottom: 1px solid #ddd; }
        .tab { flex: 1; padding: 1rem; text-align: center; cursor: pointer; transition: background 0.3s; }
        .tab:hover, .tab.active { background: #667eea; color: white; }
        .content { background: white; padding: 2rem; border-radius: 0 0 5px 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
        .hidden { display: none; }
        table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
        th, td { padding: 0.8rem; border: 1px solid #ddd; text-align: center; vertical-align: top; }
        th { background: #667eea; color: white; }
        td { background: #f9f9f9; }
        button { padding: 0.5rem 1rem; background: #667eea; color: white; border: none; border-radius: 5px; cursor: pointer; }
        button:hover { background: #5a6cd8; }
        button:disabled { background: #ccc; cursor: not-allowed; }
        .form-group { margin-bottom: 1rem; }
        label { display: block; margin-bottom: 0.5rem; }
        input, select { width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 5px; }
        .edit-form { display: none; }
        .drop-btn { background: #ff4444; }
        .drop-btn:hover { background: #cc0000; }
        #timetable-filter, #courses-filter, #grades-filter { width: 30%; margin-bottom: 1rem; display: inline-block; }
        .schedule-info { font-size: 0.8em; color: #555; margin-top: 0.2rem; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>欢迎，<span id="student-name">[学生姓名]</span> 同学</h1>
        </div>
        <div class="tabs">
            <div class="tab active" data-tab="profile">个人资料</div>
            <div class="tab" data-tab="enroll">选课</div>
            <div class="tab" data-tab="grades">查看成绩</div>
            <div class="tab" data-tab="timetable">课程表</div>
        </div>
        <div class="content" id="profile">
            <h2>个人信息</h2>
            <div id="profile-view">
                <p>姓名: <span id="name">[姓名]</span></p>
                <p>学号: <span id="student-id">[编号]</span></p>
                <p>性别: <span id="gender">[性别]</span></p>
                <p>出生日期: <span id="birth-date">[日期]</span></p>
                <p>专业: <span id="major">[专业]</span></p>
                <p>电话: <span id="phone">[电话]</span></p>
                <p>邮箱: <span id="email">[邮箱]</span></p>
                <button onclick="showEditForm()">编辑资料</button>
            </div>
            <div id="profile-edit" class="edit-form">
                <form id="edit-form">
                    <div class="form-group">
                        <label for="edit-name">姓名</label>
                        <input type="text" id="edit-name" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="edit-gender">性别</label>
                        <select id="edit-gender" name="gender">
                            <option value="male">男</option>
                            <option value="female">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="edit-birth-date">出生日期</label>
                        <input type="date" id="edit-birth-date" name="birth_date" required>
                    </div>
                    <div class="form-group">
                        <label for="edit-major">专业</label>
                        <input type="text" id="edit-major" name="major" required>
                    </div>
                    <div class="form-group">
                        <label for="edit-phone">电话</label>
                        <input type="text" id="edit-phone" name="phone" pattern="[0-9]{11}" required>
                    </div>
                    <div class="form-group">
                        <label for="edit-email">邮箱</label>
                        <input type="email" id="edit-email" name="email" required>
                    </div>
                    <div class="form-group">
                        <label for="edit-password">新密码（留空则不更改）</label>
                        <input type="password" id="edit-password" name="password">
                    </div>
                    <div class="form-group">
                        <label for="edit-confirm-password">确认新密码</label>
                        <input type="password" id="edit-confirm-password" name="confirm_password">
                    </div>
                    <button type="submit">保存更改</button>
                    <button type="button" onclick="hideEditForm()">取消</button>
                </form>
            </div>
        </div>
        <div class="content hidden" id="enroll">
            <h2>可选课程</h2>
            <div class="form-group">
                <label for="courses-filter">选择学期</label>
                <select id="courses-filter" onchange="loadCourses()">
                    <option value="">-- 选择学期 --</option>
                </select>
            </div>
            <table>
                <thead>
                    <tr><th>课程编号</th><th>课程名称</th><th>学分</th><th>教师</th><th>时间安排</th><th>操作</th></tr>
                </thead>
                <tbody id="course-list"></tbody>
            </table>
        </div>
        <div class="content hidden" id="grades">
            <h2>您的成绩</h2>
            <div class="form-group">
                <label for="grades-filter">选择学期</label>
                <select id="grades-filter" onchange="loadGrades()">
                    <option value="">-- 选择学期 --</option>
                </select>
            </div>
            <table>
                <thead>
                    <tr><th>课程编号</th><th>课程名称</th><th>学分</th><th>成绩</th><th>操作</th></tr>
                </thead>
                <tbody id="grade-list"></tbody>
            </table>
        </div>
        <div class="content hidden" id="timetable">
            <h2>您的课程表</h2>
            <div class="form-group" style="margin-bottom: 1rem;">
                <label for="timetable-filter">选择年份和学期</label>
                <select id="timetable-filter" onchange="loadTimetable()">
                    <option value="">-- 选择年份和学期 --</option>
                </select>
            </div>
            <table>
                <thead>
                    <tr>
                        <th>时间段</th>
                        <th>星期一</th>
                        <th>星期二</th>
                        <th>星期三</th>
                        <th>星期四</th>
                        <th>星期五</th>
                        <th>星期六</th>
                        <th>星期日</th>
                    </tr>
                </thead>
                <tbody id="timetable-body">
                    <tr><td>1</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                    <tr><td>2</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                    <tr><td>3</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                    <tr><td>4</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                    <tr><td>5</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                    <tr><td>6</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                    <tr><td>7</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                    <tr><td>8</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                    <tr><td>9</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                    <tr><td>10</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                    <tr><td>11</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                    <tr><td>12</td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
                </tbody>
            </table>
        </div>
    </div>

    <script>
        const tabs = document.querySelectorAll('.tab');
        const contents = document.querySelectorAll('.content');

        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                tabs.forEach(t => t.classList.remove('active'));
                tab.classList.add('active');
                contents.forEach(c => c.classList.add('hidden'));
                document.getElementById(tab.dataset.tab).classList.remove('hidden');
            });
        });

        // Fetch student data
        async function loadStudentData() {
            const response = await fetch('/student/data');
            const data = await response.json();
            document.getElementById('student-name').textContent = data.name;
            document.getElementById('name').textContent = data.name;
            document.getElementById('student-id').textContent = data.student_id;
            if(data.gender === 'male')
                document.getElementById('gender').textContent = '男';
            else
                document.getElementById('gender').textContent = '女';
            const birthDate = new Date(data.birth_date);
            const formattedBirthDate = birthDate.toISOString().split('T')[0]; // 提取 YYYY-MM-DD 部分
            document.getElementById('birth-date').textContent = formattedBirthDate;
            document.getElementById('major').textContent = data.major;
            document.getElementById('phone').textContent = data.phone;
            document.getElementById('email').textContent = data.email;

            document.getElementById('edit-name').value = data.name;
            document.getElementById('edit-gender').value = data.gender;
            document.getElementById('edit-birth-date').value = data.birth_date;
            document.getElementById('edit-major').value = data.major;
            document.getElementById('edit-phone').value = data.phone;
            document.getElementById('edit-email').value = data.email;
            document.getElementById('edit-password').value = '';
            document.getElementById('edit-confirm-password').value = '';
        }

        // Fetch available semesters
        async function loadSemesters(selectId) {
            const response = await fetch('/student/semesters');
            const semesters = await response.json();
            const select = document.getElementById(selectId);
            select.innerHTML = '<option value="">-- Select Semester --</option>' +
                semesters.map(sem => `<option value="${sem.year} ${sem.semester}">${sem.year} ${sem.semester}</option>`).join('');
        }

        // Fetch available courses
        async function loadCourses() {
            const filter = document.getElementById('courses-filter').value;
            const response = await fetch('/student/courses' + (filter ? `?year=${filter.split(' ')[0]}&semester=${filter.split(' ')[1]}` : ''));
            const courses = await response.json();
            const courseList = document.getElementById('course-list');
            courseList.innerHTML = courses.map(course => `
                <tr>
                    <td>${course.course_id}</td>
                    <td>${course.course_name}</td>
                    <td>${course.credit}</td>
                    <td>${course.instructor_name}</td>
                    <td>${course.year} ${course.semester} ${parseTimeSlots(course.time_slots, course.weeks)}</td>
                    <td><button onclick="enroll('${course.course_id}')" ${!course.can_enroll ? 'disabled' : ''}>Enroll</button></td>
                </tr>
            `).join('');
        }

        // Fetch grades
        async function loadGrades() {
            const filter = document.getElementById('grades-filter').value;
            const response = await fetch('/student/grades' + (filter ? `?year=${filter.split(' ')[0]}&semester=${filter.split(' ')[1]}` : ''));
            const grades = await response.json();
            const gradeList = document.getElementById('grade-list');
            gradeList.innerHTML = grades.map(grade => `
                <tr>
                    <td>${grade.course_id}</td>
                    <td>${grade.course_name}</td>
                    <td>${grade.credit}</td>
                    <td>${grade.grade || 'N/A'}</td>
                    <td>${grade.grade === null ? `<button class="drop-btn" onclick="dropCourse('${grade.course_id}')">Drop</button>` : ''}</td>
                </tr>
            `).join('');
        }

        // Fetch and populate timetable
        async function loadTimetable() {
            const filter = document.getElementById('timetable-filter').value;
            const tbody = document.getElementById('timetable-body');

            // Clear existing timetable
            for (let row of tbody.rows) {
                for (let cell of row.cells) {
                    if (cell.cellIndex > 0) cell.innerHTML = '';
                }
            }

            // Only load timetable if a semester is selected
            if (filter) {
                const [year, semester] = filter.split(' ');
                const url = `/student/timetable?year=${year}&semester=${semester}`;
                const response = await fetch(url);
                const timetable = await response.json();

                // Populate timetable for each schedule
                timetable.forEach(course => {
                    const timeSlots = course.time_slots.split(',');
                    const weeks = course.weeks.split(',');

                    timeSlots.forEach((timeSlot, index) => {
                        const [dayStr, slotRange] = timeSlot.split(':');
                        const [startWeek, endWeek] = weeks[index].split('-').map(Number);
                        const dayIndex = parseInt(dayStr) - 1; // 1-based to 0-based (Monday = 0)
                        const [startSlot, endSlot] = slotRange.split('-').map(Number);

                        for (let slot = startSlot; slot <= endSlot; slot++) {
                            const cell = tbody.rows[slot - 1].cells[dayIndex + 1];
                            if (!cell.innerHTML) {
                                cell.innerHTML = `
                                    <div>${course.course_name}</div>
                                    <div>Instructor: ${course.instructor_name}</div>
                                    <div>Location: ${course.location}</div>
                                    <div class="schedule-info">Weeks: ${startWeek}-${endWeek}</div>
                                `;
                            }
                        }
                    });
                });
            }
        }

        // Helper function to parse time_slots into readable format
        function parseTimeSlots(timeSlots, weeks) {
            const schedules = timeSlots.split(',').map((slot, index) => {
                const [dayStr, slotRange] = slot.split(':');
                const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
                const day = days[parseInt(dayStr) - 1];
                const weekRange = weeks.split(',')[index];
                return `${day} Periods ${slotRange} (Weeks ${weekRange})`;
            });
            return schedules.join(', ');
        }

        // Edit profile functionality
        function showEditForm() {
            document.getElementById('profile-view').classList.add('hidden');
            document.getElementById('profile-edit').classList.remove('edit-form');
        }

        function hideEditForm() {
            document.getElementById('profile-view').classList.remove('hidden');
            document.getElementById('profile-edit').classList.add('edit-form');
        }

        document.getElementById('edit-form').addEventListener('submit', async (e) => {
            e.preventDefault();
            const password = document.getElementById('edit-password').value;
            const confirmPassword = document.getElementById('edit-confirm-password').value;

            if (password && password !== confirmPassword) {
                alert('两次输入的密码不一致!');
                return;
            }

            const formData = {
                name: document.getElementById('edit-name').value,
                gender: document.getElementById('edit-gender').value,
                birth_date: document.getElementById('edit-birth-date').value,
                major: document.getElementById('edit-major').value,
                phone: document.getElementById('edit-phone').value,
                email: document.getElementById('edit-email').value,
                password: password || null
            };

            try {
                const response = await fetch('/student/update', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(formData)
                });
                const result = await response.json();
                if (result.success) {
                    loadStudentData();
                    hideEditForm();
                    alert('个人信息更改成功!');
                } else {
                    alert('更改信息失败: ' + result.error);
                }
            } catch (error) {
                console.error('Update error:', error);
                alert('An error occurred while updating your profile.');
            }
        });

        async function enroll(courseId) {
            await fetch('/student/enroll', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ course_id: courseId })
            });
            loadCourses();
            loadGrades();
            loadTimetable();
            alert('选课成功!');
        }

        async function dropCourse(courseId) {
            if (confirm('你确定要退选这门课程吗?')) {
                try {
                    const response = await fetch('/student/drop', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ course_id: courseId })
                    });
                    const result = await response.json();
                    if (result.success) {
                        loadCourses();
                        loadGrades();
                        loadTimetable();
                        alert('退课成功!');
                    } else {
                        alert('退课失败: ' + result.error);
                    }
                } catch (error) {
                    console.error('Drop error:', error);
                    alert('An error occurred while dropping the course.');
                }
            }
        }

        window.onload = () => {
            loadStudentData();
            loadSemesters('courses-filter');
            loadSemesters('grades-filter');
            loadSemesters('timetable-filter');
            loadCourses();
            loadGrades();
            // Do not call loadTimetable() on page load to keep it empty initially
        };
    </script>
</body>
</html>